Skip to main content

Pageflow - Page Events

The Pageflow module in Digisquares provides a no-code, visual environment for designing, testing, and deploying page-level interactions and triggers. With Pageflow, you can define how individual pages respond to lifecycle events, user actions, state changes, and external data without writing imperative code. Instead, you assemble flows by connecting nodes on a canvas and configuring each node’s behavior through intuitive dialogs.

1. Editor Header & Global Context​

At the top of the Pageflow screen, you’ll find global controls that determine your editing context and allow you to manage the current Pageflow as a reusable asset.

  1. Project Selector (upper right)

    • Shows the active project (Sales Application).
    • Clicking opens a dropdown of other projects you own or collaborate on.
    • Changing projects reloads the entire Pageflow canvas to match the target project’s pages, variables, and flows.

  2. Full Screen Toggle 🔲

    • Switches the canvas into fullscreen mode for immersive editing.

  3. Settings (⚙️)

    • Opens the Pageflow preferences: canvas grid settings, snap-to-grid toggling, and performance options (e.g., max node rendering).

  4. Notifications (🔔)

    • Alerts you to relevant events: published Pageflows, conflicts from concurrent edits, or version releases.

  5. User Avatar

    • Displays your profile; clicking gives access to account preferences, help, and sign-out.

  6. Pageflow Name Input

    • Displays the current flow’s name (accounts).
    • Click the pencil icon ✏️ to rename; name changes propagate to all references in the Pageflow list.

  7. Save Pageflow

    • Persists draft changes to the server.
    • Disabled when no changes are pending; enabled when you edit nodes or variable bindings.

  8. Back Button

    • Returns to the master Pageflow list (where you can create, copy, or delete flows).

Tip: Save frequently! The editor has auto-save every 2 minutes, but manual saves ensure you retain version history markers.

2. Canvas & Nodes Panel​

The main canvas is your workspace for visually composing the flow of events and actions.

  • Root Node: Page Events

    • Every Pageflow starts with a root Page Events trigger node.
    • This node represents the entry point where any page-level event can attach beneath it.
    • You cannot delete or move the root node; it anchors all downstream logic.

  • Add Node Button (+)

    • Shown directly below each node when hovered or when the canvas is focused.
    • Clicking opens a menu of node types: Page Event, Control Event, Data Action, Subflow, Delay/Timer, Custom Script.

  • Node Appearance

    • Icon & Label: The left side shows a pictogram of the node type and a text label (e.g., “Page Events”).
    • Toolbar: On hover, two icons appear: ✏️ (edit configuration) and 🗑️ (delete node).
    • Connector Line: A blue vertical line indicates the execution order; child nodes run sequentially or in parallel (depending on configuration).

  • Canvas Controls (bottom left)

    • Zoom In (+) / Zoom Out (–): Adjust your view.
    • Fit to Screen: Automatically scales and centers the entire flow.
    • Lock/Unlock Canvas: When locked, dragging nodes is disabled to prevent accidental repositioning.

Pro Tip: Use Ctrl + Mouse Wheel to zoom quickly. Right-click on empty canvas to pan.

3. Sidebar Overview: Tabs & Scopes​

The right-hand sidebar organizes contextual data into seven tabs, each representing a variable scope or node list. Click a tab icon to switch panels.

  1. Nodes (🔲)

    • Lists every node in the flow with type and name.
    • Clicking a node entry scrolls and highlights it on the canvas.

  2. Flow Variables (🔀)

    • Variables created specifically for this Pageflow instance.
    • Examples: selectedCustomerId, tempFormData, lastScrollPosition.
    • Scope: Reset on flow start; not visible to other flows.

  3. Page Variables (📄)

    • Defined in the Page context (via the Page designer).
    • Used to persist data across node executions on a single page.
    • Screenshots show string variables: Page First Name, Page Phone Number, plus test entries like asdvdhd : hn.

  4. Constants (π)

    • Read-only, developer-defined values.
    • Good for magic numbers, fixed labels, API endpoints.
    • Shown: treeee : 32652655, VALUE : 785412569, DEFAULT : ID.

  5. Global Variables (🌐)

    • Shared across the entire application.
    • Examples: user_token, current_locale, order_id (see screenshot).
    • Persist beyond single flow execution; used for cross-flow coordination.

  6. Environment Variables (⚙️)

    • Pulled from the runtime environment (e.g., NODE_ENV, API_BASE_URL).
    • Useful for toggling behavior based on dev/staging/prod.
    • Note: Values may be null if not set in environment.

  7. Enums (🔢)

    • Enumerations: pre-populated lists of options.
    • Display icon indicates type: string enum (📄), number enum (🔢), object enum (🗄️).
    • Good for dropdown menus, status flags, or role definitions.

Workflow Tip: Drag a variable from any tab directly into node inputs or condition builders to bind it.

4. Adding & Configuring a Page Event Node​

To respond to a page’s lifecycle or user interactions, you insert a Page Event under the root:

  1. Click + Below Page Events.

  2. Select “Page Event” from the node palette.

  3. Configure in the Modal:

    • Select Page: Dropdown lists pages in your project. Sample entries:

      • Login Page, Sample Login Page, Welcome Back Page
      • Register Form, Thank You Page, Application Form
      • Revenue Dashboard, Step Design, etc.

    • Select Event: Typical options include:

      • onLoad: Fires once when the page finishes loading.
      • onUnload: Fires before the user leaves or reloads.
      • onScroll: Fires when the user scrolls; useful for infinite scroll or lazy loading.
      • customEvent: A user-defined event triggered elsewhere in your application.

    • Advanced Settings: (Optional)

      • Condition: Only fire if a boolean expression is true (e.g., user_role == 'admin').
      • Throttle/Debounce: Control event frequency for high-frequency triggers like scroll.

    • Bind Variables: Use the sidebar to assign event parameters to Flow/Page variables.

  4. Save & Close: Clicking OK adds the configured node to the canvas.

Example Use Case: On the Revenue Dashboard, fire a fetchData action onLoad, passing startDate and endDate from Page Variables.

5. Node Types & Advanced Patterns​

Beyond Page Events, Pageflow supports a variety of node types:

A. Control Event Node​

  • Listens to UI control actions (clicks, form submits, input changes).
  • Configurable via a modal similar to Page Event.
  • Example: On Submit of OrderForm, validate inputs and call createOrder action.

B. Data Action Node​

  • Performs CRUD operations or API calls.
  • Define request URL, method, headers, and body variables.
  • Map response fields back into Flow or Page Variables.

C. Subflow Node​

  • Encapsulate a sequence of nodes into a reusable subflow.
  • Parameterize subflows with input/output variables for greater modularity.

D. Delay / Timer Node​

  • Pause execution for a specified duration or until a scheduled time.
  • Useful for creating countdowns or polling loops.

E. Custom Script Node​

  • Insert JavaScript code snippets when complex logic is required.
  • Access the context object to read/write variables.
  • Note: Use sparingly to maintain no-code philosophy.

Pattern Library: Consider building a library of common subflows (e.g., form validation, pagination) for reuse.

6. Variable Binding & Data Flow​

Data binding lies at the heart of Pageflow, enabling dynamic flows:

  1. Drag & Drop

    • Drag a variable label from the sidebar into any input field in a node configuration.

  2. Direct Edit

    • Click the input field and type property-style references: flow.myVar, page.customerName, env.API_BASE_URL.

  3. Expressions & Functions

    • Use basic operators (+, -, ==, &&, ||) to build conditions.
    • Call built-in functions: formatDate(), toUpperCase(), parseInt().

  4. Mapping Data

    • In Data Action results, map JSON keys to Flow/Page variables: e.g., response.data.orders -> flow.ordersList.

Debugging Tip: Use the Console tab (not shown) to log values at runtime and inspect data flow in real time.

7. Collaboration & Versioning​

Pageflows support team collaboration:

  • Ownership & Permissions

    • Each flow has an owner; collaborators can be granted Edit or View-only roles.

  • Version History

    • Every save creates a version snapshot. Use the timeline slider to revert if needed.

  • Comments & Annotations

    • Right-click a node to leave comments for team members, facilitating peer review.

Best Practice: Branch workflows by copying the main flow before experimenting with major changes.

8. Troubleshooting & Tips​

  • Canvas Performance

    • If rendering slows, increase the zoom to view only relevant nodes or collapse subflows.

  • Error Handling

    • Wrap critical Data Actions in a try/catch or use an Error Handler node to display friendly messages.

  • Testing

    • Use the built-in Preview mode to simulate events and trace execution paths.

  • Accessibility

    • Ensure Control Event nodes reference ARIA-labeled controls to support keyboard and screen-reader users.

  • Accessibility Testing

    • Validate that events do not hijack focus unexpectedly; use Delay nodes to manage focus shifts gracefully.

9. Summary & Next Steps​

You’ve now seen a line-by-line deep dive into the Pageflow editor based on the provided screenshots. Key takeaways:

  • Header & Context: Understand where you are working and how to manage your flow metadata.
  • Canvas & Nodes: Build logic visually by adding, editing, and linking nodes.
  • Variable Scopes: Leverage Flow, Page, Global, Env, and Constant variables for clean data binding.
  • Advanced Patterns: Use subflows, data actions, and custom scripts judiciously.
  • Collaboration & Versioning: Safeguard your flows with snapshots, comments, and permissions.
  • Best Practices: Modularize, test incrementally, and document thoroughly.